<template>
  <a-pagination
    v-model="currentValue"
    :defaultCurrent="defaultCurrent"
    :total="total"
    :pageSizeOptions="pageSizeOptions"
    :pageSize="pageSizeValue"
    :showSizeChanger="showSizeChanger"
    :size="size"
    :showLessItems="showLessItems"
    :showQuickJumper="showQuickJumper"
    @change="onChange"
    @showSizeChange="onsShowSizeChange"
  />
</template>

<script>
export default {
  name: 'DPagination',
  props: {
    value: {
      type: Number
    },
    defaultCurrent: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    },
    pageSizeOptions: {
      type: Array,
      default: () => ['10', '20', '30', '40']
    },
    pageSize: {
      type: Number,
      default: 10
    },
    showSizeChanger: {
      type: Boolean,
      default: false
    },
    size: {
      type: String
    },
    showLessItems: {
      type: Boolean,
      default: false
    },
    showQuickJumper: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentValue: this.value,
      pageSizeValue: this.pageSize
    };
  },
  methods: {
    onChange(page) {
      this.$emit('input', page);
      this.$emit('change', page);
    },
    onsShowSizeChange(current, pageSize) {
      this.$emit('update:pageSize', pageSize);
      this.$emit('showSizeChange', current, pageSize);
    }
  },
  watch: {
    currentValue: function(newVal) {
      this.$emit('input', newVal);
    },
    value: function(newVal) {
      this.currentValue = newVal;
    },
    pageSizeValue: function(newVal) {
      this.$emit('update:pageSize', newVal);
    },
    pageSize: function(newVal) {
      this.pageSizeValue = newVal;
    }
  }
};
</script>

<style lang="scss" scoped></style>
